<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/static/js/dev.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="/static/plugin/element-ui/element-ui.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>
    <link href="/static/css/common-component.css" rel="stylesheet"/>
    <link href="/static/css/common-element-plus.css" rel="stylesheet"/>
    <link href="/static/css/common_biz.css" rel="stylesheet"/>

    <title>字典数据项</title>
    <style>
    </style>
</head>
<body class="skin-default">
<div id="app" class="qy-view-page-app">
    <el-scrollbar view-class="qy-el-scrollbar-height-p100">
        <div class="qy-view-page-content">

            <!-- 查询条件 -->
            <div id="qy-view-search-bar" class="qy-view-search-bar qy-height-resize">
                <div class="qy-view-search-condition-bar">
                    <el-form :inline="true" :model="searchCondition">
                        <el-form-item label="字典项code"  >
                            <el-input v-model="searchCondition.code" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="字典项说明"  >
                            <el-input v-model="searchCondition.name" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="所属字典"  >
                            <el-select v-model="searchCondition.dictCode" :clearable="true">
                                <el-option v-for="option in dictCodeOptions" :value="option.code" :label="option.name"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="list_search"><i class="fa fa-search" aria-hidden="true"></i>&nbsp;查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>


            <!-- 按钮区 -->
            <div id="qy-view-button-bar" class="qy-view-button-bar qy-height-resize">
                <el-button type="primary" plain
                        size="default"
                        @click="list_add"
                        
                >新增</el-button>
                <el-button type="danger" plain
                        size="default"
                        @click="list_delete_batch"
                        
                >删除</el-button>
                <el-button type="warning" plain
                        size="default"
                        @click="reloadPage"
                        
                >刷新</el-button>
            </div>

            <!-- 数据表格 -->
            <div id="qy-view-data-bar" class="qy-view-data-bar qy-height-resize">
                <jo-el-table :url="tableDataUrl" :ref="joTableRef" :search-param="searchCondition" first-column="checkbox" :page-size="20" :enable-loading="true" >
                    <template #default="scope">
                        <el-table :ref="tableRef" :data="scope.data" header-cell-class-name="jo-el-table-header"
                                  row-key="code"
                                  :tree-props="{ children: 'children' }"
                                  @sort-change="list_table_sort"
                                  :max-height="tableHeight">
                            <el-table-column type="selection" prop="selection" width="50" fixed="left" label="#" header-align="center" align="center"></el-table-column>
                            <el-table-column prop="code" min-width="180" header-align="left" align="left"  sortable="custom" >
                                <template #header="scope"><span title="">字典项code</span></template>
                            </el-table-column>
                            <el-table-column prop="name" min-width="180" header-align="left" align="left"   >
                                <template #header="scope"><span title="">字典项说明</span></template>
                            </el-table-column>
                            <el-table-column prop="val" min-width="180" header-align="left" align="left"   >
                                <template #header="scope"><span title="">字典内容</span></template>
                            </el-table-column>
                            <el-table-column prop="status" min-width="180" header-align="left" align="left"  sortable="custom" >
                                <template #header="scope"><span title="">状态</span></template>
                                <template #default="scope">
                                            <jo-el-tag :value="scope.row.status" :options="statusOptions"
                                                       code-field="key" text-field="value"></jo-el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="style" min-width="180" header-align="left" align="left"   >
                                <template #header="scope"><span title="">样式标签</span></template>
                                <template #default="scope">
                                        <jo-el-tag :value="scope.row.style" :options="styleOptions"
                                                   code-field="key" text-field="value"></jo-el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="dictCode" min-width="180" header-align="left" align="left"   >
                                <template #header="scope"><span title="">所属字典</span></template>
                            </el-table-column>
                            <el-table-column prop="dataSequence" min-width="100" header-align="left" align="left"  sortable="custom" >
                                <template #header="scope"><span title="">顺序</span></template>
                            </el-table-column>
                            <el-table-column prop="createTime" min-width="155" header-align="left" align="left"  sortable="custom" >
                                <template #header="scope"><span title="">创建时间</span></template>
                                <template #default="scope">
                                        {{ formatTime(scope.row.createTime) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="118" fixed="right">
                                <template #default="scope">
                                    <el-button type="primary" link
                                            size="default"
                                            @click="list_edit(scope.row)"
                                            
                                    >编辑</el-button>
                                    <el-divider direction="vertical"></el-divider>
                                    <el-button type="danger" link
                                            size="default"
                                            @click="list_delete(scope.row)"
                                            
                                    >删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </jo-el-table>
            </div>

        </div>

        <!-- 表单 -->
        <el-dialog v-model="formShow" :title="formTitle" :width="formWidth">
            <el-form :ref="formRef" :model="formData" label-position="right" :rules="checkRules" :label-width="formLabelWidth">
                <el-row :gutter="15">
                    <el-col :span="24" v-if="!addFlag" >
                        <el-form-item label="主键" prop="id">
                            <el-input v-model="formData.id"                     :disabled="editFlag"
 placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12"  >
                        <el-form-item label="所属字典" prop="dictCode">
                            <el-select v-model="formData.dictCode" 
 placeholder="">
                                    <el-option v-for="option in dictCodeOptions" :value="option.code" :label="option.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12"  >
                        <el-form-item label="字典项父节点" prop="parentCode">
                            <el-tree-select v-model="formData.parentCode" placeholder="" :clearable="true"
                                    

                                    :data="parentCodeOptions" node-key="code" :props="{label:'name',children:'children'}"
                                    :check-strictly="true"
                                    :render-after-expand="false">
                            </el-tree-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12"  >
                        <el-form-item label="字典项编码" prop="code">
                            <el-input v-model="formData.code" 
 placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12"  >
                        <el-form-item label="字典项说明" prop="name">
                            <el-input v-model="formData.name" 
 placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24"  >
                        <el-form-item label="字典项内容" prop="val">
                            <el-input type="textarea" v-model="formData.val" 
 placeholder="" :rows="3" :autosize="true" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12"  >
                        <el-form-item label="状态" prop="status">
                            <el-switch v-model="formData.status" 

                                       active-value="yes"
                                    inactive-value="no"
                            ></el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12"  >
                        <el-form-item label="数据顺序" prop="dataSequence">
                            <el-input-number v-model="formData.dataSequence" 
 placeholder="" :min="0" :max="2147483647" :step="10" :controls="false" ></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24"  >
                        <el-form-item label="样式" prop="style">
                            <el-radio-group v-model="formData.style" 
 >
                                <el-radio v-for="option in styleOptions" :label="option.key">{{option.value}}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24"  >
                        <el-form-item label="扩展属性" prop="extInfo">
                            <el-input type="textarea" v-model="formData.extInfo" 
 placeholder="" :rows="3" :autosize="true" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24"  >
                        <el-form-item label="备注" prop="remark">
                            <el-input type="textarea" v-model="formData.remark" 
 placeholder="" :rows="3" :autosize="true" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="close_form">关闭</el-button>
                    <el-button type="primary" @click="form_save" v-if="addSaveBtnShow && addFlag">确认</el-button>
                    <el-button type="primary" @click="form_save" v-else-if="updateSaveBtnShow && editFlag">确认</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 字典项父节点(parentCode)枚举项加载 -->
        <jo-el-data url="/lowcode/online/api/getList/47" bind-root-name="parentCodeOptions"></jo-el-data>
        <!-- 所属字典(dictCode)枚举项加载 -->
        <jo-el-data url="/lowcode/online/api/getList/46" bind-root-name="dictCodeOptions"></jo-el-data>

    </el-scrollbar>
</div>


<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--layer-->
<!--<script src="/static/plugin/layer/layer.js"></script>-->
<!--vue-->
<script src="/static/plugin/vue/v3/vue.global.js"></script>
<script src="/static/plugin/element-ui/element-ui.js"></script>
<script src="/static/plugin/element-ui/locale/zh-cn.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-adapt-element-plus.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<script src="/static/plugin/jo/jo-page-element-plus.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<script src="/static/js/common_biz.js"></script>
<script type="text/javascript">
    // 代码生成按钮事件定义
    window.TEMP_BTN_FUNCTION = {
        methods: {
            // 自定义按钮栏事件 start
            // 自定义按钮栏事件 end

            // 自定义表格行按钮事件 start
            // 自定义表格行按钮事件 end
        }
    };
</script>
<script type="text/javascript">
    // vue参数, 留着给全局js定制用, 如果有需要定制vue参数, 则覆盖TEMP_VUE_PARAM
    window.TEMP_VUE_PARAM = {};

</script>
<script type="text/javascript">
    // vue应用构造
    const app = Vue.createApp(joEl.buildVueAppParam(window.TEMP_VUE_PARAM || {}, {
        data: function () {
            return {
                // 表格高度
                tableHeight: 'auto',
                // 表单宽度
                formWidth: '60%',
                // 表单项标题宽度
                formLabelWidth: '120px',
                // 是否支持更新保存按钮展示
                updateSaveBtnShow: true,
                // 是否支持新增保存按钮展示
                addSaveBtnShow: true,
                // 查询参数
                searchCondition: {},
                // 表格数据url
                tableDataUrl: '/lowcode/lcpDictItem/getPage',
                // 表单详情查询url
                formQueryUrl: '/lowcode/lcpDictItem/get',
                // 新增url
                formInsertUrl: '/lowcode/lcpDictItem/insert',
                // 修改url
                formUpdateUrl: '/lowcode/lcpDictItem/update',
                // 删除url
                deleteUrl: '/lowcode/lcpDictItem/delete',
                // 校验规则
                checkRules: {
                    id: [
                        joEl.rules.required('主键不允许为空', 'blur'),
                        joEl.rules.notNaN('主键请输入数字类型', 'blur'),
                    ],
                    dictCode: [
                        joEl.rules.required('字典编码不允许为空', 'blur'),
                        joEl.rules.length('字典编码内容长度限制为1~64', 'blur', 64),
                    ],
                    parentCode: [
                        joEl.rules.length('父节点code内容长度限制为1~64', 'blur', 64),
                    ],
                    code: [
                        joEl.rules.required('编码不允许为空', 'blur'),
                        joEl.rules.length('编码内容长度限制为1~64', 'blur', 64),
                    ],
                    name: [
                        joEl.rules.required('说明不允许为空', 'blur'),
                        joEl.rules.length('说明内容长度限制为1~64', 'blur', 64),
                    ],
                    val: [
                        joEl.rules.length('字典值内容长度限制为1~128', 'blur', 128),
                    ],
                    status: [
                        joEl.rules.required('状态不允许为空', 'blur'),
                    ],
                    dataSequence: [
                        joEl.rules.required('数据顺序不允许为空', 'blur'),
                        joEl.rules.notNaN('数据顺序请输入数字类型', 'blur'),
                    ],
                    style: [
                        joEl.rules.length('样式内容长度限制为1~32', 'blur', 32),
                    ],
                    extInfo: [
                        joEl.rules.length('扩展属性内容长度限制为1~1024', 'blur', 1024),
                    ],
                    remark: [
                        joEl.rules.length('备注内容长度限制为1~128', 'blur', 128),
                    ],
                },
                // 数据选项: 父节点code
                parentCodeOptions: [],
                // 数据选项: 状态
                statusOptions: [
                    {key: 'yes', value: '可用'},
                    {key: 'no', value: '禁用', styleType: 'danger'},
                ],
                // 数据选项: 样式标签
                styleOptions: [
                    {key: 'primary', value: 'primary', styleType: 'primary'},
                    {key: 'success', value: 'success', styleType: 'success'},
                    {key: 'info', value: 'info', styleType: 'info'},
                    {key: 'warning', value: 'warning', styleType: 'warning'},
                    {key: 'danger', value: 'danger', styleType: 'danger'},
                ],
                // 数据选项: 所属字典
                dictCodeOptions: [],

            }
        }
        , computed: {}
        , methods: {
            // 新增表单数据初始化前的处理
            handle_form_init_data_add(data) {
                // 默认值
                data.status = 'yes';
                data.dataSequence = 100;
            },
            // 编辑表单数据初始化前的处理
            handle_form_init_data_edit(data) {
            },

            // 数据区高度适应
            dataBarResize() {
                var total = 0;
                jo.forEach($('.qy-view-data-bar').siblings('.qy-height-resize'), (item) => {
                    var id = item.id;
                    if (id) {
                        total += jo.getDefVal($('#' + id).outerHeight(true), 0);
                    }
                });
                var boxPadding = $('.qy-view-page-content').outerHeight(true) - $('.qy-view-page-content').height();
                var h = $('.qy-view-page-app').height() - boxPadding - total - jo.getDefVal($('.jo-el-table-page-bar').outerHeight(true));
                console.info('更新数据表格高度: %s -> %s', this.tableHeight, h);
                this.tableHeight = h;
            },
            // 数据区监听
            dataBarResizeListener() {
                // 初始计算
                this.dataBarResize();
                // 监听注册
                var arr = $('.qy-view-data-bar').siblings('.qy-height-resize');
                jo.forEach(arr, (item) => {
                    var id = item.id;
                    if (id) {
                        this.registerElementHeightResize('#' + item.id, this.dataBarResize);
                    } else {
                        console.warn('注册数据区高度监听需要兄弟节点有id属性:', item);
                    }
                });
                // 数据区高度变化
                // this.registerElementHeightResize('#qy-view-data-bar', this.dataBarResize);
            },
        }
        , mounted() {
            // 数据区大小监听
            this.dataBarResizeListener();
        }
        , setup() {

        }
    }, window.TEMP_BTN_FUNCTION || {}, joEl.VUE_COMMON_VIEW, joEl.VUE_COMMON));
    app.use(ElementPlus, {locale: ElementPlusLocaleZhCn});
    app.use(joEl);

    var appVM = app.mount("#app");
</script>

</body>
</html>
